<script setup lang="ts">
const q = ref('')

const emit = defineEmits()
const close = () =>{
  emit("close")
}
</script>

<template>
  <div class="flex flex-col flex-1 min-h-0 divide-y divide-gray-100 dark:divide-gray-800">
    <div class="relative flex items-center"><span
        class="i-heroicons-magnifying-glass-20-solid pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500 h-5 w-5"
        aria-hidden="true"></span><input value="" id="headlessui-combobox-input-nVUNbxVN80W_1012" aria-expanded="false"
                                         aria-autocomplete="list" role="combobox" type="text" tabindex="0"
                                         data-headlessui-state=""
                                         class="w-full placeholder-gray-400 dark:placeholder-gray-500 bg-transparent border-0 text-gray-900 dark:text-white focus:ring-0 focus:outline-none sm:text-sm h-[--header-height] sm:h-12 px-4 ps-11 pe-10"
                                         placeholder="Search..." aria-label="Search..." autocomplete="off"
                                         aria-controls="headlessui-combobox-options-nVUNbxVN80W_1013">
      <button
          @click="close"
          type="button"
              class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center absolute end-4"
              aria-label="Close"><span class="i-heroicons-x-mark-20-solid flex-shrink-0 h-5 w-5"
                                       aria-hidden="true"></span></button>
    </div>

    <div class="relative flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800 scroll-py-10">
      <div class="p-2" role="none"><h2 class="px-2.5 my-2 text-xs font-semibold text-gray-900 dark:text-white"
                                       role="none">
        Getting Started</h2>
        <div class="text-sm text-gray-700 dark:text-gray-200" aria-label="Getting Started" role="none">
          <div v-for="i in 0"
              class="flex justify-between select-none items-center rounded-md px-2.5 py-1.5 gap-2 relative bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white cursor-pointer"
              id="headlessui-combobox-option-nhUWVEIiMnG_462" role="option" tabindex="-1" aria-selected="false"
              data-headlessui-state="active">
            <div class="flex items-center gap-1.5 min-w-0"><span
                class="i-heroicons-document-text flex-shrink-0 w-5 h-5 text-gray-900 dark:text-white"
                aria-hidden="true"></span>
              <div class="flex items-center gap-1.5 min-w-0"><span
                  class="truncate flex-none">Introduction</span><span class="truncate text-gray-400 dark:text-gray-500">Fully styled and customizable components for Nuxt.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>